@media screen and (max-width: 1055px) {
    .container{
        max-width: 100vw;
    }

    .register-form{
        width: 75%;
    }
    
}

@media screen and (max-width: 680px) {
    .register-form{
        width: 90%;
    }
}

@media screen and (max-width: 550px) {

    .header{
        align-items: center;
        justify-content: center;
        gap: 2.4rem;
        flex-direction: column;
    }
    .login-form-container,
    .register-form-container{
        width: 100vw;
        /* height: calc(100vh - 15rem); */
        height: 100%;
        margin-top: 2.4rem;
    }

    .login-links{
        flex-direction: column;
        align-items: start;
        gap: .8rem;
    }

    .grid-col-2{
        grid-template-columns: 1fr;
    }   
    .register-form {
        width: 100%;
    }
    #btn-register{
        grid-column: 1/2;   
    }
    
    .credit-card-option{
        grid-column: 1/2;   

    }

    .scr-1{
        width: 96%;
    }
    .main-heading{
        font-size: 2rem;
    }
    .confirm-form{
        width: 96%;

    }

}